<template>
  <a-table :columns="columns" :data-source="datalist" :loading="loading" @change="onClickPagination" :pagination="paginations">
    <template #iconPath="{ text }">
      <div class="d-img">
        <img :src="text" />
      </div>
    </template>
    <template #customRender="{ text }">
      {{ text }}
    </template>
    <template #merge="{ record }">
      <a-button type="primary" @click="onApplicationMerge(record)" v-if="mergestatus">
        合并
      </a-button>
      <a-button type="primary" @click="onApplicationUnmerge()" v-else>
        解除合并
      </a-button>
    </template>
  </a-table>
</template>

<script lang="ts">
import { reactive, toRefs } from "vue";
import { getapk } from "@/api/apkApi/index";
import { getipa } from "@/api/ipaApi/index";
import { getsuper } from "@/api/superApi/index";
import { TabledataInterface, TypeEnum } from "@/CommonAssets/index";
import { AxiosResponse } from "axios";
import { AddMerge, GetMerge } from "@/api/mergeApi";
import { $message } from "@/components/AntDesign/message";
import createStore from "@/store/index";

export default {
  name: "应用合并",
  props: {
    drawerdata: Object,
  },
  setup(props: any) {
    const datalist: any = reactive({
      datalist: [],
      Searchvalue: "",
      loading: false,
      paginations: {
        total: 0,
        pageSize: 8,
        hideOnSinglePage: true,
        current: 1,
      },
      columns: [
        {
          title: "应用图标",
          dataIndex: "iconPath",
          align: "center",
          slots: { customRender: "iconPath" },
        },
        {
          title: "应用名称",
          dataIndex: "remarks",
          align: "center",
          ellipsis: true,
        },
        {
          title: "应用类型",
          dataIndex: "type",
          align: "center",
          slots: { customRender: "apptype" },
        },
        {
          title: "合并",
          dataIndex: "merge",
          align: "center",
          slots: { customRender: "merge" },
        },
      ],
      mergestatus: true,
    });

    /* 合并请求数据 */
    async function request(type: string, pageNo = 1) {
      let id: string | null = null;
      if (createStore.state.userDataList) {
        id = createStore.state.userDataList._id;
      }
      switch (type) {
        case "apkModel":
          const ipaReslut = await getipa({
            pageNo,
            pageSize: datalist.paginations.pageSize,
            id,
          });
          const superReslut = await getsuper({
            pageNo,
            pageSize: datalist.paginations.pageSize,
            id,
          });
          return {
            data: ipaReslut.data.data.concat(superReslut.data.data),
            total: ipaReslut.data.total + superReslut.data.total,
          };
        default:
          const apkReslut = await getapk({
            pageNo,
            pageSize: datalist.paginations.pageSize,
            id,
          });
          return apkReslut.data;
      }
    }

    /* 处理请求 */
    async function dataList(pageNo = 1): Promise<void> {
      datalist.loading = true;
      const reslut = await request(props.drawerdata.apptype, pageNo);
      datalist.paginations.total = reslut.total;
      reslut.data.forEach((element: TabledataInterface) => {
        element.key = element._id;
        element.iconPath = `${(window as any).$URL}/${element.iconPath}`;
        element.type = TypeEnum[element.apptype];
      });
      datalist.datalist = reslut.data;
      datalist.loading = false;
    }

    /* 查询应用合并 */
    async function SelctMerge(): Promise<void> {
      try {
        const getmerge: AxiosResponse<any> = await GetMerge({
          lid: props.drawerdata.merge,
          apptype: props.drawerdata.mergeType,
        });
        console.log(getmerge);
        getmerge.data.key = getmerge.data._id;
        getmerge.data.iconPath = `${(window as any).$URL}/${getmerge.data.iconPath}`;
        getmerge.data.type = TypeEnum[getmerge.data.apptype];
        datalist.datalist.push(getmerge.data);
        datalist.mergestatus = false;
      } catch (error) {
        if (error.data) {
          if (error.data.code == 201) {
            onApplicationUnmerge();
          }
          $message("error", error.data.message);
        }
      }
    }

    if (props.drawerdata.merge) {
      SelctMerge();
    } else {
      dataList();
    }

    /* 应用合并 */
    async function onApplicationMerge(
      record: TabledataInterface
    ): Promise<void> {
      try {
        datalist.loading = true;
        const reslut: AxiosResponse<any> = await AddMerge({
          lid: record.lid,
          mergeType: record.apptype,
          id: props.drawerdata._id,
          apptype: props.drawerdata.apptype,
        });
        datalist.datalist = [];
        datalist.datalist.push(record);
        datalist.mergestatus = false;

        createStore.commit("mergeData", {
          index: props.drawerdata.index,
          merge: record.lid,
          mergeType: record.apptype,
        });
        $message("success", reslut.data.message);
        datalist.loading = false;
      } catch (error) {
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    }

    /* 解除应用合并 */
    async function onApplicationUnmerge(): Promise<void> {
      try {
        datalist.loading = true;
        const reslut: AxiosResponse<any> = await AddMerge({
          lid: null,
          mergeType: null,
          id: props.drawerdata._id,
          apptype: props.drawerdata.apptype,
        });
        await dataList();
        datalist.mergestatus = true;
        createStore.commit("mergeData", {
          index: props.drawerdata.index,
          merge: null,
          mergeType: null,
        });
        $message("success", "解除成功");
        datalist.loading = false;
      } catch (error) {
        $message("error", error.data.message);
      }
    }

    /* 分页 */
    function onClickPagination(value: {
      current: number;
      pageSize: number;
      total: number;
    }) {
      datalist.paginations.current = value.current;
      request(props.drawerdata.apptype, value.current);
    }

    return {
      ...toRefs(datalist),
      onApplicationMerge,
      onClickPagination,
      onApplicationUnmerge,
      dataList,
    };
  },
};
</script>
<style lang="less" scoped>
.d-img {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 0px 9px 2px #d0cdcd;
  img {
    width: 100%;
  }
}
</style>
